<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/vue-2.4.0.js"></script>
    <style>
      #one {
        width: 400px;
        height: 400px;
        background-color: rgb(128, 210, 245);
      }
      #two {
        width: 300px;
        height: 300px;
        background-color: rgb(228, 193, 244);
      }
      #three {
        width: 200px;
        height: 200px;
        background-color: rgb(250, 235, 158);
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- .stop阻止冒泡，阻止事件继续向外传播 -->
      <div id="one" @click="one">
        <div id="two" @click.stop="two">
          <div id="three" @click="three"></div>
        </div>
      </div>
      <!-- 事件冒泡是从里往外触发。捕获是从外往里触发 -->

      <!-- .capture 添加捕获事件 -->
      <div id="one" @click.capture="one">
        <div id="two" @click="two">
          <div id="three" @click="three"></div>
        </div>
      </div>

      <!-- .self 当事件作用于他本身的时候触发回调-->
      <div id="one" @click="one">
        <div id="two" @click="two">
          <div id="three" @click.self="three"></div>
        </div>
      </div>

      <!-- .once事件触发一次 -->
      <div id="one" @click="one">
        <div id="two" @click="two">
          <div id="three" @click.once="three"></div>
        </div>
      </div>

      <!-- .prevent 阻止默认事件：a标签 表单提交 -->
      <a href="http://baidu.com" @click.prevent="tap">百度一下</a>
    </div>
  </body>
  <script>
    let vm = new Vue({
      el: "#app",
      data: {},
      methods: {
        tap() {
          console.log("我要跳转了");
        },
        one() {
          console.log(11111);
        },
        two() {
          console.log(22222);
        },
        three() {
          console.log(33333);
        },
      },
    });
  </script>
</html>
